<template>
  <!--------------------- 图片框 --------------------
* @auto kyle
* @date 2020-7-28
* @inrto 图片框通用组件，宽高可以更改
* @props imgUrl传入的是图片地址
  -->
  <div class="pos-r">
    <div
      class="img-mask"
      @click="click"
      @touchstart="gotouchstart"
      @touchmove="gotouchmove"
      @touchend="gotouchend"
    />
		<img v-if="isBr50" :src="imgSrc" class="br-50" alt="图片" />
    <img v-else
      :src="imgSrc" :class="isBr?'br-16':''"
      alt="图片"
    >

    <van-dialog v-model="dialogShow" :show-confirm-button="showConfirmButton" close-on-click-overlay>
      <p class="ptb-20 tac hb" @click="saveImg">保存</p>
      <p class="ptb-20 tac" @click="openShareList">分享</p>
    </van-dialog>
    <!-- 保存/分享弹窗 -->

    <van-popup v-model="popupShow" position="bottom">
      <p class="tal mg-30">分享到</p>
      <div class="flex-s-c share-box mtb-30">
        <div
          v-for="(item,index) in shareList"
          :key="index"
          class="tac"
          @click="shareImg(item.platform)"
        >
          <svg-icon :icon-class="item.icon" class="fs-50" />
          <p>{{ item.text }}</p>
        </div>
      </div>
    </van-popup>
    <!-- 分享路径弹出层 -->

    <div
      v-show="imgShow"
      class="image-preview-box"
      @touchstart="gotouchstart"
      @touchmove="gotouchmove"
      @touchend="gotouchend"
    >
      <van-image-preview v-model="imgShow" :images="imgSrcList" />
    </div>
    <!-- 图片预览层 -->
  </div>
</template>

<script>
// import { ImagePreview } from 'vant'
export default {
  name: 'ImgBox',
  props: {
    imgUrl: {
      type: String,
      required: false,
      default: ''
    },
    isCashcode: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否圆角
    isBr: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否可以显示大图
    showBigPicture: {
      type: Boolean,
      required: false,
      default: false
    },
    // 长按呼出菜单
    longTouch: {
      type: Boolean,
      required: false,
      default: false
    },
		// 是否圆形图片
    isBr50: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  data() {
    return {
      timeOutEvent: 0,
      showConfirmButton: false,
      dialogShow: false,
      popupShow: false,
      imgShow: false,
      shareList: [
        {
          icon: 'wechat',
          platform: 'WEIXIN',
          text: '微信'
        },
        {
          icon: 'WEIXIN_TIMELINE',
          platform: 'WEIXIN_TIMELINE',
          text: '朋友圈'
        },
        {
          icon: 'QQ',
          platform: 'QQ',
          text: 'QQ'
        },
        {
          icon: 'SINA',
          platform: 'SINA',
          text: '新浪'
        }
      ]
    }
  },

  computed: {
    imgSrc() {
      let imgSrc = this.imgUrl
      if (!imgSrc) {
        imgSrc = require('@/assets/images/no-img.jpg')
      } else if (imgSrc.indexOf('http') === -1) {
        if (!this.$webInfo.ImgDomain) {
          this.$webInfo.ImgDomain = 'https://oss.hsy884.com'
        }
        imgSrc = this.$webInfo.ImgDomain + imgSrc
      }
      return imgSrc
    },
    imgSrcList() {
      const imgSrcList = [this.imgSrc]
      return imgSrcList
    }
  },
  methods: {
    click() {
      if (this.showBigPicture) {
        this.imgShow = true
      }
      this.$emit('click')
    },
    gotouchstart() {
      const that = this
      clearTimeout(that.timeOutEvent) // 清除定时器
      that.timeOutEvent = 0
      that.timeOutEvent = setTimeout(function() {
        // 执行长按要执行的内容
        if (that.longTouch) {
          that.dialogShow = true
        }
      }, 600) // 这里设置定时
    },
    // 手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    gotouchend(ev) {
      const that = this
      clearTimeout(that.timeOutEvent)
      if (that.timeOutEvent !== 0) {
        // 这里写要执行的内容（尤如onclick事件）
      }
    },
    // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gotouchmove(ev) {
      const that = this
      clearTimeout(that.timeOutEvent) // 清除定时器
      that.timeOutEvent = 0
    },
    saveImg() {
      this.dialogShow = false
      if (this.isCashcode) {
        this.$emit('saveImg')
        return
      }
      this.$utils.downFile(this.imgSrc, '')
    },
    openShareList() {
      this.dialogShow = false
      this.popupShow = true
    },
    shareImg(platform) {
      this.popupShow = false
      if (this.isCashcode) {
        this.$emit('shareImg', platform)
        return
      }
      this.$utils.ShareImgByPlatfrom(platform, this.imgSrc, '')
    }
  }
}
</script>
<style lang="scss" scoped>
.img-mask{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.share-box {
  div {
    width: 25%;
  }
}
.image-preview-box {
  height: 100vw;
  width: 100vh;
}
.br-50{
	border-radius: 50%;
}
</style>

